<template>
    <div>
        <!--2、准备echarts容器-->
        <div ref="chart1" style="width: 600px;height:400px;border: solid 1px rgba(200,200,200,0.5);"></div>
    </div>
</template>

<script>
    //1、导入echarts模块
    import * as echarts from 'echarts'

    export default {
        name: "fans-chars1",
        data() {
            return {}
        },
        methods: {},
        mounted() {
            // 3、基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(this.$refs.chart1)

            //4、导入图表数据
            let option = {
                title: {
                    text: '粉丝图表数据'
                },
                tooltip: {},
                legend: {
                    data:['数量']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '数量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            }

            // 5、使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        }
    }
</script>

<style scoped>

</style>
